<template>
	<div class="right_list">
		<div v-for="item in rightshujv" :key="item.id">
			<van-divider :style="{margin:'0'}">
			  {{item.name}}
			</van-divider>
			<div class="shop_box" v-for="items in item.products" :key="items.id">
				<img @click="product(items)" :src="items.small_image" alt="加载失败">
				<div>
					<h3>{{items.name}}</h3>
					<p>{{items.spec}}</p>
					<span>{{items.price}}</span>
					<del>{{items.origin_price}}</del>
					<div class="gouwuche" @click="add(items)">
						<van-icon name="cart-o" />
					</div>
				</div>
			</div>
		</div>
		<van-divider class="bottom_box">到底了</van-divider>
	</div>
</template>

<script>
	import {addCartApi} from '@/api'
	import BScroll from '@better-scroll/core'
	import {mapMutations,mapState} from 'vuex'
	export default {
		name:'rightlist',
		props:["rightshujv"],
		methods:{
			...mapMutations(['addgoods']),
			async add(goods){
				let {id:goods_id,name:goods_name,price:goods_price,small_image} = goods
				let {token:user_id} = this.isDenglu
				// 拿到数据将其结构给新对象，使新对象用其作为自己的参数发送ajax并返回一个res对象，证明已经添加到服务器中成功，然后res返回的对象中有这些商品的信息，再将商品的信息给同步到本地
				let goodss = {goods_id, goods_name, goods_price, small_image, user_id}
				let res = await addCartApi(goodss)
				// console.log(res)
				//将商品信息同步到本地
				this.addgoods(res.data.data)
			},
			product(goods){
				this.$router.push({name:"product",query:{goods}})
			}
		},
		computed:{
			...mapState(['isDenglu']),
		},
		watch:{
			// rightshujv(){
			// 	this.$nextTick(()=>{
			// 		this.scroll = new BScroll('.right')
			// 	})
			// }
		}
	}
</script>

<style scoped lang="less">
	.right_list{
		.bottom_box{
			padding-bottom: 10px;
			margin: 0;
		}
		div{
			.shop_box{
				margin-bottom: 30px;
				display: flex;
				border-bottom: 1px solid #ececec;
				img{
					width: 100px;
					height: 100px;
				}
				div{
					border: none;
					padding-left: 20px;
					flex: 1;
					display: block;
					height: 110px;
					margin: 0;
					h3,p{
						width: 140px;
						font-size: 18px;
						white-space: nowrap;
						overflow: hidden;
						text-overflow: ellipsis;
						margin: 8px 0;
					}
					span{
						color: red;
						font-size: 12px;
					}
					del{
						font-size: 12px;
						color: #ccc;
					}
					.gouwuche{
						padding: 0;
						width: 30px;
						height: 30px;
						display: flex;
						justify-content: center;
						align-items: center;
						border-radius: 15px;
						float: right;
						background-color: #48c46f;
						font-size: 18px;
						margin-right: 5px;
					}
				}
			}
		}
	}
</style>